<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .out-img{
            width: 30vw;
            position: relative;
            z-index: 999;
        }

        .preview-img{
            width: 100vw;
            height: 100vh;
            position: fixed;
            z-index: 1300;
            left: 0;
            top: 0;
            background-color: #000;
            -webkit-transform: scale(0);
            transform: scale(0);
            -webkit-transition: .3s;
            transition: .3s;
            
        }
        .previewimgactive{
            transform: scale(1);
            -webkit-transform: scale(1);
        }
        .preview-img .show-box{
            width: 100%;
            height: 100%;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
        }
        .preview-img .show-box img{
            max-width: 100vw;
            max-height: 100vh;
        }
        .preview-img .save-file{
            width: 80vw;
            height: 40px;
            font-size: 16px;
            color: #333;
            background-color: #fff;
            border-radius: 5px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            display: flex;
            -webkit-justify-content:center;
            justify-content: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .preview-img .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            opacity: .4;
            background-color: #000;
        }
        @font-face {font-family: "iconfont";
        src: url('iconfont.eot?t=1571898743256'); /* IE9 */
        src: url('iconfont.eot?t=1571898743256#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKYAAsAAAAABlAAAAJNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApUZQE2AiQDCAsGAAQgBYRtBzUbkAXInpo8KVI1/WABkltTYKCACKL9frN3h4kmomgWTeSfKMESCWKjZK1ewjua0+uY9NtRSA5ZoU3S9j79hj+fgWMhCRSz0JuQrXDrhU7L61myV+/zXI5vAR3I/EDneNca0xZN6gV0Lw6kQPfAKLJCCbxh7IIX+JhAs3EdEodjM/NQprBXBeKGWSaUFTKKwuqNQn3DwSKe1WlMj+kXwFP0/fgHLcpI6jK77aQ2moaBL86SfFvdus4PbpcLgR0jYxUoxEVj5UihYGyh5kqRaXCs5uBLVQU+cVS3YH+d3dgKRqHyTKqne9R6gseaqg8YmXQZ0dfe2enNx1tT+mqtFXfeP2/zv6GFyqmCz/P9ZKdyNdo9enKcn2Q/u+c5xmAAoHrItflBIGheV6/Xbt6ogNfT5ShVPRQYFqNxN9Hgd6gDh4qht72paGqjNuk7TUezZlSAE93yUx1959aGxgmxBmMZskazRGFWUafFBuo12kGzFePHW/TgCkVpwrJtgNDpEUm7F2Sd/ojC5FCn3z/qdUYhml1Fz4Ut5oNVHHA0BaZJcpWwlO9R1y8q4uZZtGLH5Hl9xC0ij1ieqJJSro+jh3yJLdGSpQlBCeW+S8bAc+g4Pgm4n8WUkDJCBF2yTJveJKV8Fyoc4JBJQGlE0iqCSfF5aDBeqKh8fhayxBwm3jFQly9CXITNTqgkygBi3OINGniUVyJLLBpBoAiK87mIMTAPORw+Imiel4VSBElmQinQRXZG0aEWaXub+3cnoJntTOG0Zy0108vEzC97LAYAAA==') format('woff2'),
        url('iconfont.woff?t=1571898743256') format('woff'),
        url('iconfont.ttf?t=1571898743256') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
        url('iconfont.svg?t=1571898743256#iconfont') format('svg'); /* iOS 4.1- */
        }

        .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }

        .iconfanhuianniu:before {
        content: "\e60b";
        }
        

    </style>
</head>
<body>
    <div id="root">
        <img class="out-img" @click="showimg" src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C1%2C600%2C396%3Bc0%3Dbaike80%2C5%2C5%2C80%2C26/sign=555c93571fce36d3b64bd97007c316b6/b3b7d0a20cf431adc5062cb44136acaf2fdd9862.jpg" alt="">
        
        <preview-img :is-show="previewBox" img-url="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C1%2C600%2C396%3Bc0%3Dbaike80%2C5%2C5%2C80%2C26/sign=555c93571fce36d3b64bd97007c316b6/b3b7d0a20cf431adc5062cb44136acaf2fdd9862.jpg" @closepreview = "closepreview"></preview-img>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function(){
            var t = 20;
            var timp = "";
            Vue.component('preview-img',{
                template:'<div class="preview-img" :style="positionObj" ref="preview" :class="{previewimgactive:isShow}" @click="closepreview">'
                            +'<div class="show-box">'
                                +'<img :src="imgUrl" alt="">'
                            +'</div>'
                            +'<div class="mask" v-show="saveBox" @click.stop="closeSaveBox"></div>'
                            +'<div class="save-file" v-show="saveBox" @click.stop="saveFile"><span>保存到手机</span></div>'
                        +'</div>',
                data:function(){return {saveBox:false}},
                methods:{
                    closepreview:function(){ this.$emit('closepreview')},
                    saveFile:function(){},
                    closeSaveBox:function(){this.saveBox = false;}
                },
                mounted:function(){
                    var _this = this;
                    var startTime = 0;
                    var endTime = 0;
                    var timp = null;
                    _this.$refs.preview.addEventListener('touchstart',function(){
                        startTime = 0;
                        timp = setTimeout(function(){
                            _this.saveBox = true;
                        },700);
                    },false);
                    _this.$refs.preview.addEventListener('touchend',function(){
                        startTime = 0;
                        clearTimeout(timp);
                    },false);
                },
                props:{
                    isShow:{type:Boolean,default:false},
                    imgUrl:{type:String,default:""},
                    left:{type:Number,default:0},
                    top:{type:Number,default:0},
                },
                computed: {
                    positionObj:function(){
                        return {
                            left:'0',
                            top:"0",
                            margin:"0",
                            width:this.isShow ? '100vw'  : "30vw",
                        }
                    }
                },
            })
            var root = new Vue({
                el:"#root",
                data:{
                    previewBox:false,
                },
                methods:{
                    showimg(){
                        this.previewBox = !this.previewBox;
                        
                    },
                    closepreview(){
                        this.previewBox = false;
                    },
                },
                mounted:function(){
                   
                }
            })
        }
    </script>
</body>
</html>